import { defineComponent, onMounted } from "vue";
import styles from "./NeedLogin.module.scss";
import useLogin from "@/hooks/useLogin";
import { useRoute } from "vue-router";
import white_list from "@/config/white_list";

export default defineComponent({
  setup(props: any) {
    const route: any = useRoute();
    if (white_list.includes(route.name)) {
      return () => <div></div>;
    }
    const login = useLogin();
    login.getCaptcha();
    onMounted(() => {
      login.getAuth();
    })
    return () => (
      <>
        {
          login.needLogin.value && (
            <div class={styles.NeedLogin}>
              <span>您暂未登录，请先登录!</span>
              <span class={styles['login-btn']} onClick={() => { login.toLogin() }}>登录</span>
            </div>
          )
        }
        {
          login.register.is_show && (
            <div class={styles['register-floating']}>
              <div class={styles['register-card']}>
                <div class={styles['card-header']}>
                  绑定手机号
                </div>
                <div class={styles['card-container']}>
                  <span class={styles['card-tips']}>检测到您还未绑定手机号,为了方便您接收订单等信息，需要绑定手机号</span>
                  <div class={styles['card-rows']}>
                    <div class={styles['card-row']}>
                      <span class={styles['row-label']}>手机号</span>
                      <input placeholder="请输入手机号" v-model={login.register.mobile} />
                    </div>
                    <div class={styles['card-row']}>
                      <span class={styles['row-label']}>验证码</span>
                      <input placeholder="请输入验证码" v-model={login.register.vercode} />
                      <img src={login.register.captcha.img} class={styles.captcha} onClick={() => {login.getCaptcha()}} />
                    </div>
                    <div class={styles['card-row']}>
                      <span class={styles['row-label']}>动态码</span>
                      <input placeholder="请输入动态码" v-model={login.register.dynacode} />
                      <div class={styles['dynacode-btn']} onClick={() => login.sendMobileCode()}>{login.register.dynacodeData.seconds > 0 ? login.register.dynacodeData.seconds + 's' : '发送动态码'}</div>
                    </div>
                  </div>
                  <div class={styles['submit-btn']} onClick={() => { login.forceBindMobile() }}>
                    保存
                  </div>
                </div>
              </div>
            </div>
          )
        }
      </>
    )
  }
})